<template>
  <a-tabs size="small" v-model:activeKey="activeKey">
    <a-tab-pane key="baseConfig" tab="基本配置" forceRender>
      <a-form :label-col="formItemLayout.labelCol" :wrapper-col="formItemLayout.wrapperCol">
        <a-row>
          <a-col :span="direction == 'bottom' ? formItemLayout.colSpan : 24" ref="value">
            <a-form-item label="节点名称">
              <a-input :size="size" placeholder="请输入节点名称" :defaultValue="cell.value" @change="(e) => (cell.value = e.target.value)" />
            </a-form-item>
          </a-col>
          <a-col :span="direction == 'bottom' ? formItemLayout.colSpan : 24" ref="loopVariableName">
            <a-form-item label="循环变量">
              <a-input
                :size="size"
                :defaultValue="getCellValue(props, 'loopVariableName')"
                @change="(e) => setCellValue(props, 'loopVariableName', e)"
                placeholder="请输入循环变量"
              />
            </a-form-item>
          </a-col>
          <a-col :span="direction == 'bottom' ? formItemLayout.colSpan : 24" ref="loopCount">
            <a-form-item label="循环次数">
              <a-input
                :size="size"
                :defaultValue="getCellValue(props, 'loopCount')"
                @change="(e) => setCellValue(props, 'loopCount', e)"
                placeholder="请输入循环次数"
              />
            </a-form-item>
          </a-col>
          <a-col :span="direction == 'bottom' ? formItemLayout.colSpan : 24">
            <a-form-item label="请求方法">
              <a-select :size="size" :defaultValue="getCellValue(props, 'method', 'GET')" @change="(val) => setCellValue(props, 'method', val)">
                <a-select-option value="GET">GET</a-select-option>
                <a-select-option value="POST">POST</a-select-option>
                <a-select-option value="PUT">PUT</a-select-option>
                <a-select-option value="DELETE">DELETE</a-select-option>
                <a-select-option value="PATCH">PATCH</a-select-option>
                <a-select-option value="HEAD">HEAD</a-select-option>
                <a-select-option value="OPTIONS">OPTIONS</a-select-option>
                <a-select-option value="TRACE">TRACE</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="direction == 'bottom' ? 16 : 24" ref="url">
            <a-form-item label="URL" :labelCol="{ span: direction == 'bottom' ? 2 : 5 }" :wrapperCol="{ span: direction == 'bottom' ? 21 : 17 }">
              <a-input
                :size="size"
                :defaultValue="getCellValue(props, 'url')"
                @change="(e) => setCellValue(props, 'url', e)"
                placeholder="请输入URL"
              />
            </a-form-item>
          </a-col>

          <a-col :span="direction == 'bottom' ? formItemLayout.colSpan : 24" ref="sleep">
            <a-form-item label="延迟时间">
              <a-input
                :size="size"
                :defaultValue="getCellValue(props, 'sleep')"
                @change="(e) => setCellValue(props, 'sleep', e)"
                placeholder="请输入延迟时间"
              />
            </a-form-item>
          </a-col>
          <a-col :span="direction == 'bottom' ? formItemLayout.colSpan : 24" ref="timeout">
            <a-form-item label="超时时间">
              <a-input
                :size="size"
                :defaultValue="getCellValue(props, 'timeout')"
                @change="(e) => setCellValue(props, 'timeout', e)"
                placeholder="请输入超时时间"
              />
            </a-form-item>
          </a-col>
          <a-col :span="direction == 'bottom' ? formItemLayout.colSpan : 24" ref="response-charset">
            <a-form-item label="页面编码">
              <a-input
                :size="size"
                :defaultValue="getCellValue(props, 'response-charset')"
                @change="(e) => setCellValue(props, 'response-charset', e)"
                placeholder="请输入页面编码"
              />
            </a-form-item>
          </a-col>
          <a-col :span="direction == 'bottom' ? formItemLayout.colSpan : 24" ref="retryCount">
            <a-form-item label="重试次数">
              <a-input
                :size="size"
                :defaultValue="getCellValue(props, 'retryCount')"
                @change="(e) => setCellValue(props, 'retryCount', e)"
                placeholder="请输入重试次数"
              />
            </a-form-item>
          </a-col>
          <a-col :span="direction == 'bottom' ? formItemLayout.colSpan : 24" ref="retryInterval">
            <a-form-item label="重试间隔">
              <a-input
                :size="size"
                :defaultValue="getCellValue(props, 'retryInterval')"
                @change="(e) => setCellValue(props, 'retryInterval', e)"
                placeholder="请输入重试间隔"
              />
            </a-form-item>
          </a-col>
          <a-col :span="direction == 'bottom' ? formItemLayout.colSpan : 24" ref="proxy">
            <a-form-item label="代理">
              <a-input
                :size="size"
                :defaultValue="getCellValue(props, 'proxy')"
                @change="(e) => setCellValue(props, 'proxy', e)"
                placeholder="host:port"
              />
            </a-form-item>
          </a-col>
          <a-col :span="direction == 'bottom' ? 13 : 24">
            <a-form-item label="请求设置" :labelCol="{ span: 3 }" :wrapperCol="{ span: 21 }">
              <SpiderSelect :editor="editor" :cell="cell" :options="requestConfig" />
            </a-form-item>
          </a-col>
          <a-col :span="11" ref="otherConfig">&nbsp;</a-col>
        </a-row>
      </a-form>
    </a-tab-pane>
    <a-tab-pane key="paramsConfig" tab="参数" forceRender>
      <a-col ref="table"><TableAndModal :editor="editor" :cell="cell" :config="data.globalParamsConfig" @tableData="tableData" /></a-col>
    </a-tab-pane>
    <a-tab-pane key="cookieConfig" tab="Cookie" forceRender>
      <a-col ref="table"><TableAndModal :editor="editor" :cell="cell" :config="data.globalCookieConfig" @tableData="tableData" /></a-col>
    </a-tab-pane>
    <a-tab-pane key="headerConfig" tab="Header" forceRender>
      <a-col ref="table"> <TableAndModal :editor="editor" :cell="cell" :config="data.globalHeaderConfig" @tableData="tableData" /></a-col>
    </a-tab-pane>
    <a-tab-pane key="bodyConfig" tab="Body" forceRender>
      <a-form layout="horizontal" :label-col="{ span: 2 }" :wrapper-col="{ span: 22 }">
        <a-form-item label="类型">
          <a-select
            :size="size"
            :defaultValue="getCellValue(props, 'bodyTypeValue', 'none')"
            @change="(val) => setCellValue(props, 'bodyTypeValue', val)"
          >
            <a-select-option value="none">none</a-select-option>
            <a-select-option value="form-data">form-data</a-select-option>
            <a-select-option value="raw">raw</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="Content-Type" v-if="bodyTypeValue === 'raw'">
          <a-select
            :size="size"
            :defaultValue="getCellValue(props, 'body-content-type', 'text/plain')"
            @change="(val) => setCellValue(props, 'body-content-type', val)"
          >
            <a-select-option value="text/plain">text/plain</a-select-option>
            <a-select-option value="application/json">application/json</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="内容" v-if="bodyTypeValue === 'raw'" ref="request-body">
          <!-- <code-editor height="100px" :value="getCellValue('request-body')" @change="(val) => setCellValue('request-body', val)"></code-editor> -->
        </a-form-item>
        <a-col ref="table">
          <TableAndModal
            v-if="bodyTypeValue === 'form-data'"
            :batchAddBtn="false"
            :editor="editor"
            :cell="cell"
            :config="bodyParameterConfig"
            :direction="direction"
            @tableData="tableData"
          />
        </a-col>
      </a-form>
    </a-tab-pane>
  </a-tabs>
</template>

<script setup>
  import { ref, reactive, onMounted } from 'vue';
  import SpiderSelect from '../components/spiderSelect.vue';
  import TableAndModal from '../components/tableAndModal.vue';
  import data from '../json/root-data.json';
  import { setCellValue, getCellValue } from '../utils/tools';
  const props = defineProps({
    direction: { type: String, default: 'bottom' },
    cell: { type: Object },
    editor: { type: Object },
  });
  const size = ref('small');
  const activeKey = ref('baseConfig');
  const formItemLayout = reactive({
    labelCol: { span: 5 },
    wrapperCol: { span: 17 },
    colSpan: 8,
  });
  const requestConfig = ref([
    {
      label: '跟随重定向',
      value: 'follow-redirect',
      defaultVal: '1',
    },
    {
      label: 'TLS证书验证',
      value: 'tls-validate',
      defaultVal: '1',
    },
    {
      label: '自动管理Cookie',
      value: 'cookie-auto-set',
      defaultVal: '1',
    },
    {
      label: '自动去重',
      value: 'repeat-enable',
      defaultVal: '0',
    },
    {
      label: '重复不执行后续节点',
      value: 'repeat-ignore-execute',
      defaultVal: '0',
    },
  ]);
  const bodyTypeValue = ref('');
  const bodyParameterConfig = ref({
    title: '参数',
    keyPrefix: 'parameter-form',
    keys: ['parameter-form-name', 'parameter-form-type', 'parameter-form-filename', 'parameter-form-value', 'parameter-form-description'],
    columns: [
      {
        title: '参数名',
        dataIndex: 'parameter-form-name',
        width: 150,
        slots: {
          customRender: 'parameter-form-name',
        },
      },
      {
        title: '参数类型',
        dataIndex: 'parameter-form-type',
        width: 90,
        slots: {
          customRender: 'parameter-form-type',
        },
        inputType: 'select',
        selectMap: {
          text: 'text',
          file: 'file',
        },
        selectDefault: 'text',
      },
      {
        title: '文件名',
        dataIndex: 'parameter-form-filename',
        width: 200,
        slots: {
          customRender: 'parameter-form-filename',
        },
      },
      {
        title: '参数值',
        dataIndex: 'parameter-form-value',
        slots: {
          customRender: 'parameter-form-value',
        },
      },
      {
        title: '参数描述',
        dataIndex: 'parameter-form-description',
        width: 200,
        slots: {
          customRender: 'parameter-form-description',
        },
      },
      {
        title: '操作',
        dataIndex: 'operation',
        width: 150,
        slots: {
          customRender: 'action',
        },
      },
    ],
  });
  const value = ref();
  const loopVariableName = ref();
  const loopCount = ref();
  const url = ref();
  const sleep = ref();
  const timeout = ref();
  const retryCount = ref();
  const retryInterval = ref();
  const proxy = ref();
  const otherConfig = ref();
  const table = ref();
  const tabledata = ref();

  function tableData(datas) {
    tabledata.value = datas;
  }

  defineExpose({
    activeKey,
    value,
    loopVariableName,
    loopCount,
    url,
    sleep,
    timeout,
    retryCount,
    retryInterval,
    proxy,
    otherConfig,
    table,
    tabledata,
  });
</script>

<style lang="less" scoped></style>
